<template>
  <div>
      <el-form ref="searchForm"  :inline="true" :model="searchMap" style="margin-top: 20px;" >
    <!--有prop才可以重置-->
    <el-form-item prop="cardNum">
    <el-input v-model="searchMap.cardNum" placeholder="会员卡号" style="width: 200px;"></el-input> 
    </el-form-item>

    <el-form-item prop="name">
    <el-input v-model="searchMap.name" placeholder="会员名称" style="width: 200px;"></el-input>
    </el-form-item>

    <el-form-item prop="payType">
    <el-select v-model="searchMap.payType" placeholder="支付类型" style="width: 110px">
    <!--key标识，label下拉显示的文本，vulue表单值-->
    <el-option
    v-for="option in payTyepOptions"
    :key="option.type"
    :label="option.name"
    :value="option.type"
    />
    </el-select>
    </el-form-item>

    <el-form-item prop="birthday">
        <el-date-picker value-format="yyyy-MM-dd" v-model="searchMap.birthday" type="date" placeholder="出生日期"></el-date-picker>
     </el-form-item>

    <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="fetchData">查询</el-button>
        <el-button type="success" @click="resetForm('searchForm')">重置</el-button>
        <el-button type="warning" icon="el-icon-save" @click="handleAdd">新增</el-button>
    </el-form-item>
</el-form>


     <el-table :data="list" height="380" border style="width: 100%">
  <!--type="index"获取索引值，从1开始；label显示的标题; prop 数据字段名；width列的宽度-->
    <el-table-column type="index" :index="xuhao" label="序号" width="60"></el-table-column>
    <el-table-column prop="cardNum" label="会员卡号"> </el-table-column>
    <el-table-column prop="name" label="会员姓名"></el-table-column>
    <el-table-column prop="birthday" label="会员生日"></el-table-column>
    <el-table-column prop="phone" label="手机号码" width="110"></el-table-column>
    <el-table-column prop="integral" label="可用积分"></el-table-column>
    <el-table-column prop="money" label="开卡金额"></el-table-column>
    <el-table-column prop="payType" label="支付类型">
        <template slot-scope="scope"> 
            <span>{{scope.row.payType | payTypeFilter}}</span>
        </template>
    </el-table-column>
    <el-table-column prop="address" label="会员地址" width="180"></el-table-column>

    <el-table-column label="操作" width="150">
    <template slot-scope="scope">
    <el-button size="mini" @click="handleEdit(scope.row.id)">编辑</el-button>
    <el-button size="mini" type="danger" @click="handleDele(scope.row.id)">删除</el-button>
    </template>
</el-table-column>
  </el-table>


  <!-- 分页 -->
<el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="currentPage"
    :page-sizes="[5,10,20,50]"
    :page-size="pageSize"
    layout="total,sizes,prev,pager,next,jumper" 
    :total="total">
</el-pagination>

<!-- 添加或者修改 -->
  <el-dialog  :title="member.id==null ? '添加会员':'修改会员'" :visible.sync="dialogFormVisible">
				      <el-form status-icon :model="member" label-width="80px" :rules="rules" ref="ruleForm">

				            <el-form-item label="会员卡号" prop="cardNum">
				                <el-input v-model="member.cardNum"></el-input>
				            </el-form-item>
						
                            <el-form-item label="会员姓名" prop="name">
                                <el-input v-model="member.name" /> 
                            </el-form-item>

                            <el-form-item label="会员生日" prop="birthday">
                                <el-date-picker v-model="member.birthday" type="date"
                                placeholder="请点击选择" />
                            </el-form-item>

                            <el-form-item label="手机号码" prop="phone">
                                <el-input v-model="member.phone" /> 
                            </el-form-item> 
                                   
                            <el-form-item label="开卡金额" prop="money">
                                <el-input v-model="member.money" />
                            </el-form-item>

                            <el-form-item label="可用积分" >
                                <el-input v-model="member.integral" >
                            </el-input> </el-form-item>

                            <el-form-item label="支付类型" prop="payType">
                                <el-select v-model="member.payType" class="filter-item" 
                                placeholder="请点击选择">
                                <el-option v-for="option in payTyepOptions"
                                        :key="option.type"
                                        :label="option.name"
                                        :value="option.type" />
                                </el-select>
                            </el-form-item>

                            <el-form-item label="会员地址">
                                <el-input v-model="member.address" type="textarea"
                                :autosize="{minRows: 2,maxRows: 4}" placeholder="请输入地址" />
                            </el-form-item>

				      </el-form>

                        <div slot="footer" class="dialog-footer">
                                <el-button @click="dialogFormVisible=false">取消</el-button>
                                <el-button type="primary" @click="addMember('ruleForm')">{{member.id==null ? '添加':'修改'}}</el-button>
                        </div>
				  </el-dialog>
  </div>
</template>

<script>
import memberApi from '@/api/member'

const payTyepOptions =[
    {type: '1',name: '现金'},
    {type: '2',name: '微信'},
    {type: '3',name: '支付宝'},
    {type: '4',name: '银行卡'}  
]
export default {
    filters:{
        payTypeFilter(type){
            const obj  = payTyepOptions.find(obj => obj.type === type)
            return obj ? obj.name:null
        }
    },
  data () {
    return {
        list:[],
        total:0,
        currentPage: 1,//当前页,默认第1页
        pageSize: 10,//每页显示条数，10条
        //条件查询绑定条件
        searchMap: {
                cardNum:'',     
                name:'',
                payType:'',
                birthday:''
            },
        payTyepOptions,
        dialogFormVisible:false,
        member:{
            id:'',
            cardNum:'',
            name:'',
            birthday:'',
            phone:'',
            money:0,
            integral:0,
            payType:'',
            address:''
        },
        rules:{
            cardNum: [{required: true,message: '卡号不能为空',trigger: 'blur'}],
            name: [{required: true,message: '姓名不能为空',trigger: 'blur'}],
            payType: [{required: true,message: '请选择支付类型',trigger: 'change'}],
        }

    }
  },
  created(){
        this.fetchData()
  },

  components: {},

  methods: {
      fetchData(){
          memberApi.search(this.currentPage,this.pageSize,this.searchMap).then(response =>{
              const reqs = response.data
              this.total = reqs.total
              this.list = reqs.records
          })
      },
      handleEdit(id){
          this.handleAdd()
          memberApi.getById(id).then(response=>{
                const req = response.date
                if(response.code == 2000){
                    this.member = response.data 
                }
          })
      },
      handleDele(id){
          this.$confirm('确认删除这条记录吗, 是否继续?', '提示', {
					 		confirmButtonText: '确定',
					 		cancelButtonText: '取消',
					 		type: 'warning'
                }).then(()=>{
                   memberApi.deleteById(id).then(response=>{
                       if(response.code==2000){
                        this.fetchData()
                        }
                      })
                   }) 
      },
      handleSizeChange(val){
            this.pageSize = val
            this.fetchData()
      },
      handleCurrentChange(val){
            this.currentPage = val
            this.fetchData()
      },
      resetForm(formName){
             this.$refs[formName].resetFields();
      },
      xuhao(index){
		return (this.currentPage-1)*this.pageSize+index+1;
	},
    addMember(formName){
        this.$refs[formName].validate(valid=>{
          if(valid){
            memberApi.add(this.member).then(response => {
                const resp = response.data
                if(response.code == 2000){
                   this.currentPage = 1;
                   this.fetchData()
                   this.dialogFormVisible = false;
                }else{
                    this.$message({
                        message: resp.message,
                        type: 'warning'
                    });
                }
            })
            }else{
            //验证不通过
            return false;
          }
        })
    },
    handleAdd(){
       this.dialogFormVisible = true;
       this.chongzhi();
       this.$nextTick(()=>{
        //this.$nextTick()它是一个异步事件，当渲染结束之后，它的回调函数才会被执行
        //弹出窗口打开之后，需要加载Dom,就需要花费一点时间，我们就应该等待它加载完dom之后，再进行调用resetFields方法，重置表单和清除样式
       this.$refs['ruleForm'].resetFields()
      })
    },
    chongzhi(){
        this.member={
            id:'',
            cardNum:'',
            name:'',
            birthday:'',
            phone:'',
            money:0,
            integral:0,
            payType:'',
            address:'' 
        }
    }
      
  }
}
</script>

<style scoped>
</style>